<template>
	<view class="gridAll">
		<u-tabs :list="list1" @click="click" lineColor="red" lineWidth="65rpx" keyName="name" :current="id"></u-tabs>
		<view class="head">
			<view class="head-name" v-html="headName"></view>
			<view class="head-txt" v-html="headTxt"></view>
		</view>
		<view class="list">
			<view class="list-top"></view>
			<ul class="list-box">
				<li class="list-item" v-for="(item, index) in list2" :key="index" @tap="navtoDetails(item.id)">
					<image class="list-img" :src="item.list_pic_url" mode="widthFix"></image>
					<view class="list-title">{{ item.name }}</view>
					<view class="list-price">{{ item.retail_price | priceFormat }}</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
import { Apigrid } from '@/utils/api.js';
import { ApigridList } from '@/utils/api.js';
export default {
	components: {
		Apigrid,
		ApigridList
	},
	data() {
		return {
			list1: [],
			headName: '',
			headTxt: '',
			page: 1,
			size: 1000,
			list2: [],
			id: ''
		};
	},
	computed: {},
	methods: {
		async click(index) {
			console.log(index);
			// console.log(e.id);
			let res = await Apigrid(index.id);
			console.log(res.data);
			this.list1 = res.data.brotherCategory;
			// console.log(this.list1);
			this.headName = res.data.currentCategory.name;
			this.headTxt = res.data.currentCategory.front_desc;
			let res1 = await ApigridList(index.id, this.page, this.size);
			console.log(res1.data.goodsList);
			this.list2 = res1.data.goodsList;
			this.id = index.id;
		},
		suoyin(id) {
			if (id == 1005000) {
				this.id = 0;
			} else if (id == 1005001) {
				this.id = 1;
			} else if (id == 1008000) {
				this.id = 3;
			} else if (id == 1005002) {
				this.id = 2;
			} else if (id == 1019000) {
				this.id = 8;
			}
			// return this.id;
			console.log(this.id);
		},
		navtoDetails(id) {
			console.log(id);
			uni.navigateTo({
				url: `../details/details?id=${id}`
			});
		}
	},
	async onLoad(e) {
		// console.log(e.id);
		let res = await Apigrid(e.id);
		console.log(res.data);
		this.list1 = res.data.brotherCategory;
		// console.log(this.list1);
		this.headName = res.data.currentCategory.name;
		this.headTxt = res.data.currentCategory.front_desc;
		let res1 = await ApigridList(e.id, this.page, this.size);
		console.log(res1.data.goodsList);
		this.list2 = res1.data.goodsList;
		this.suoyin(e.id);
	}
};
</script>

<style lang="scss">
.gridAll {
	ul {
		list-style: none;
	}
	.head {
		width: 750rpx;
		background-color: #efefef;
		.head-name {
			width: 100%;
			height: 100rpx;
			color: #333;
			font-size: 36rpx;
			line-height: 100rpx;
			text-align: center;
		}
		.head-txt {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			color: #666;
			text-align: center;
			font-size: 28rpx;
		}
	}

	// 列表
	.list {
		width: 750rpx;
		.list-top {
			width: 100%;
			height: 100rpx;
		}
		.list-box {
			padding: 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;
			.list-item {
				width: 49%;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				.list-img {
					width: 100%;
				}
				.list-title {
					font-size: 28rpx;
					color: #333;
					text-align: center;
				}
				.list-price {
					font-size: 28rpx;
					color: var(--price-color);
					text-align: center;
					margin-top: 10rpx;
				}
			}
		}
	}
}
</style>
